<template>
  <div class='staff-list-container'>
    <el-form ref="form"
             :model="getJobUserListParam"
             label-width="100px">
      <el-row style="margin-bottom:20px;margin-top:10px;">
        <el-col :span="12"
                :offset="12"
                class="person-style">
          <el-col :span="24"
                  style="margin-left:1px;overflow:hidden;">
            <el-col :span="17"
                    align="right"
                    style="padding-right:15px;">
              <el-input v-model="getJobUserListParam.user_name"
                        placeholder="请输入昵称">
              </el-input>
            </el-col>
            <el-col :span="7"
                    align="right">
              <el-button type="primary"
                         icon="el-icon-search"
                         align="right"
                         class="normal_btn"
                         @click="getUserList">搜索</el-button>
            </el-col>
          </el-col>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:15px">
        <el-col :span="24">
          <el-table ref="obsTable"
                    :row-key="(row) => row.user_id"
                    @selection-change="handleObsChange"
                    :highlight-current-row="true"
                    :header-cell-style="{background:'#f5f5f5'}"
                    :data="jobUserList.list"
                    @row-click="getRowData"
                    border
                    height="576px"
                    class="obs-style">
            <el-table-column type="selection"
                             :reserve-selection="true"
                             v-if='checkbox'>
            </el-table-column>
            <el-table-column prop="user_no"
                             v-if="isDataAuthPage==false"
                             label="系统账号"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="user_name"
                             :label="isDataAuthPage==false?'用户姓名':'人员姓名'"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="status_name"
                             v-if="isDataAuthPage==false"
                             label="状态"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone"
                             label="手机号"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="create_date"
                             v-if="isDataAuthPage==false"
                             label="加入时间"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作"
                             v-if="showEditRow"
                             align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                           @click="jobUserDeleteConfirm(scope)"
                           type="text">
                  删除
                </el-button>
                <el-button size="mini"
                           v-if="getJobUserListParam.node_type === '2' || getJobUserListParam.node_type === '3'"
                           @click="isAdmin(scope.row)"
                           type="text">
                  设置管理员
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"
                align="center"
                id="bottomPaMargin">
          <el-pagination background
                         id="obs_page"
                         @size-change="handleSizeChange"
                         @current-change="handleJobUserCurrentChange"
                         :current-page="getJobUserListParam.page"
                         :page-sizes="[10]"
                         layout="total,sizes,prev, pager, next, jumper"
                         :page-size="getJobUserListParam.page_size"
                         :total="jobUserList.total_count">
          </el-pagination>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="设置管理员"
               :visible.sync="adminDialogVisible"
               width="30%">
      <span>是否设置为管理员</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="adminDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveAdmin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { organizationApi } from '@/services/CompanySetting'
export default {
  data () {
    return {
      adminDialogVisible: false,
      getJobUserListParam: {
        company_id: '',
        org_no: '',
        dept_no: '',
        job_id: '',
        node_type: '',
        user_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      jobUserList: {
        list: [],
        total_count: 0
      },
      searchForm: {
        name: ''
      },
      jobId: '',
      userId: '',
    }
  },
  props: {
    selectedArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    isDataAuthPage: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    requestParam: Object,
    checkbox: {
      type: Boolean,
      default: false
    },
    showEditRow: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    requestParam: {
      handler (newval, oldval) {
        this.getJobUserListParam = JSON.parse(JSON.stringify(newval))
        console.log(this.getJobUserListParam);
        this.jobId = this.getJobUserListParam.job_id;
        this.$refs.obsTable.clearSelection();//清空
        this.getUserList()
      },
      deep: true
    }
  },
  methods: {
    isAdmin (row) {
      console.log(row, "设置管理员");
      this.adminDialogVisible = true
      this.userId = row.user_id
    },
    saveAdmin () {
      organizationApi.setAdmin({
        data: {
          node_type: this.getJobUserListParam.node_type, //节点类型
          id: this.jobId,  //节点id
          user_id: this.userId,  //用户id 
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('设置成功')
          this.adminDialogVisible = false
        }
      })
    },
    // 获取人员列表
    getUserList () {
      organizationApi.getUserList({
        data: this.getJobUserListParam
      }).then(res => {
        if (res.code === 0) {
          this.jobUserList = res.data
        }
      })
    },
    // 获取选中列的数据
    getCheckedRow () {
      let data = this.$refs.obsTable.selection
      return data
    },
    //获取点击行的数据
    getRowData (row) {
      // console.log('aaa=>', row)
      this.$emit('update:rowData', row)
    },
    // 人员列表-删除-弹框
    jobUserDeleteConfirm (scope) {
      this.$confirm('是否删除该人员？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.jobUserDeleteApi(scope.row)
      })
    },
    // 人员列表-删除-调用api
    jobUserDeleteApi (row) {
      let obj = {}
      obj.node_type = this.getJobUserListParam.node_type
      if (this.getJobUserListParam.node_type === '3') {
        obj.job_user_id = row.job_user_id
      } else {
        obj.user_id = row.user_id
      }

      organizationApi.deleteUser({
        data: obj
      }).then(res => {
        // console.log(res, 'delete job user')
        if (res.code === 0) {
          this.$message.success('删除人员成功')
          this.getUserList()
        }
      })
    },
    handleObsChange (select, row) {
      this.$emit('update:selectedArr', select)
    },
    handleSizeChange (page) {
      this.getJobUserListParam.page_size = page
      this.getUserList()
    },
    handleJobUserCurrentChange (page) {//当前页数据刷新
      this.getJobUserListParam.page = page
      this.getUserList()
    },
    getJobUserList () {

    }
  },
  created () {
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.staff-list-container {
}
#bottomPaMargin {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
